<template>
  <div id="dialogPubWorkVideo">
    <el-dialog
      title="修改积分"
      :visible.sync="dialogData.isShow"
      width="570px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="选择：" prop="integralChangeType">
            <el-radio-group v-model="ruleForm.integralChangeType">
              <el-radio
                v-for="item in typeList"
                :key="item.dictValue"
                :label="item.dictValue"
              >
                {{ item.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="用户昵称：" class="nick-name">{{
                name
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="剩余积分：">{{ integral }}</el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label="`${numLabel}积分值：`" prop="surplusIntegral">
            <el-input-number
              v-model.number="ruleForm.surplusIntegral"
              size="mini"
              :min="1"
              :max="
                !ruleForm.integralChangeType && integral < maxNum
                  ? integral
                  : maxNum
              "
              controls-position="right"
              :step="1"
              step-strictly
            ></el-input-number>
            <span class="tips"
              >只能输入数字，仅支持整数，数值范围1-{{ maxNum }}</span
            >
          </el-form-item>
          <el-form-item label="变更原因：" prop="integralChangeReason">
            <el-input
              v-model="ruleForm.integralChangeReason"
              type="textarea"
              :maxlength="reasonLength"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单部分 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { setIntegrals } from '@/api/couponsIntegral/integrals'
import { pubVideo, getDetail, editVideo } from '@/api/workManagement/videoBatch'
import { getKeyValue } from '@/api/system/parameter'
import { getVestDetail } from '@/api/vestManagement/vestManage' // 接口
export default {
  msg: '小视频批量维护-编辑弹窗',
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      name: '',
      typeList: [
        { dictValue: true, dictLabel: '加积分' },
        { dictValue: false, dictLabel: '减积分' }
      ], // 状态
      integral: undefined,
      numLabel: '加',
      maxNum: 9999,
      reasonLength: 0,
      ruleForm: {
        dpAccount: undefined,
        integralChangeType: '', // 加积分/减积分
        surplusIntegral: '', // 加积分值
        integralChangeReason: '' // 变更原因
      },
      rules: {
        integralChangeType: { required: true, message: '操作类型' },
        userId: {},
        surplusIntegral: {
          required: true,
          message: '积分值不能为空',
          trigger: 'change'
        },
        integralChangeReason: {
          required: true,
          message: '变更原因不能为空',
          trigger: 'blur'
        }
      }
    }
  },
  watch: {
    'ruleForm.integralChangeType': {
      handler(newV, oldV) {
        if (newV === true) {
          this.numLabel = '加'
        } else {
          this.numLabel = '减'
          if (
            this.integral < this.maxNum &&
            this.ruleForm.surplusIntegral > this.integral
          ) {
            this.ruleForm.surplusIntegral = this.integral
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getStatusList()
    let {
      dpAccountUser: { userName: nickName },
      surplusIntegral,
      dpAccount
    } = this.dialogData.params
    this.name = nickName
    this.integral = surplusIntegral
    this.ruleForm.dpAccount = dpAccount
    this.reasonLength = this.dialogData.reasonLength
  },
  methods: {
    /* 获取筛选条件 */
    async getStatusList() {
      this.ruleForm.integralChangeType = this.typeList[0].dictValue
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
      this.dialogData.params = {}
    },
    /* 确认提交 */
    async confirmLabel(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true
          let params = { ...this.ruleForm }
          setIntegrals(
            params,
            (response) => {
              this.$emit('refresh')
              this.cancelLabel()
              this.loading = false
            },
            (response) => {
              this.loading = false
              this.$message({
                message: '编辑失败，' + response.message,
                type: 'warning'
              })
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less">
#dialogPubWorkVideo {
  @import url('~@common/style/textarea.less');
  .nick-name {
    .el-form-item__content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .el-dialog__body {
    padding-top: 10px !important;
  }
  .video-info {
    color: #0d1636;
    line-height: 28px;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .video-face-box {
    width: 500px;
    height: 350px;
    margin: 0 auto 10px;
  }
  .tips {
    color: #f00;
    padding-left: 10px;
  }
}
</style>
